<template>
  <div class="image">
    <template v-if="formData.advancedConfig.swiper">
      <el-carousel motion-blur :interval="formData.advancedConfig?.interval">
        <el-carousel-item v-for="item in previewSrcList" :key="item">
          <el-image
            :preview-src-list="previewList"
            v-show="previewSrcList.length"
            class="image"
            :src="item"
            :z-index="1000"
            preview-teleported
            @click.ctrl="handleDblClick"
            @close="handleClose"
          ></el-image>
        </el-carousel-item>
      </el-carousel>
    </template>
    <template v-else>
      <el-image
        :preview-src-list="previewList"
        v-show="formData.advancedConfig?.urlList.length"
        class="image"
        :src="formData.advancedConfig?.urlList[0]?.url"
        :z-index="1000"
        preview-teleported
        @click.ctrl="handleDblClick"
        @close="handleClose"
      ></el-image>
      <div v-show="!formData.advancedConfig?.urlList.length" class="center">
        {{ formData.name }}
      </div>
    </template>
  </div>
</template>
<script setup>
import { deepClone } from '../../utils'

let props = defineProps({
  formData: {
    type: Object,
    default: () => {},
  },
})
let { formData } = toRefs(props)
let previewList = ref([])
let previewSrcList = computed(() => {
  return formData.value.advancedConfig.urlList.map((item) => item.url)
})
let handleDblClick = () => {
  previewList.value = deepClone(previewSrcList.value)
}
let handleClose = () => {
  previewList.value = []
}
</script>
<style scoped>
.image {
  width: 100%;
  height: 100%;
}
.el-carousel {
  height: 100%;
  width: 100%;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>
